<template>
<div class='shelf-item'
     :class="{'shelf-item-shadow': data.type === 1 || data.type === 2}"
      @click="onItemClick">
   <component class="shelf-item-comp"
               :class="{'is-edit': isEditMode && data.type === 2}"
               :is="item"
               :data="data"></component>
    <!-- 书籍被选中时的图标状态 -->
    <div class="icon-selected"
         :class="{'is-selected': data.selected}"
         v-show="isEditMode && data.type === 1"></div>
</div>
</template>

<script>
import ShelfBook from './ShelfBook'
import ShelfCategory from './ShelfItemCategory'
import ShelfAdd from './ShelfItemAdd'
import { storeShelfMixin } from '../../utils/mixin'
import { gotoStoreHome } from '../../utils/store'
export default {
  mixins: [storeShelfMixin],
  props: {
    data: Object
  },
  computed: {
    item() {
      return this.data.type === 1 ? this.book :(this.data.type === 2 ? this.category :this.add)
    }
  },
  data() {
    return {
      book: ShelfBook,
      category: ShelfCategory,
      add:ShelfAdd
    }
  },
  methods: {
    onItemClick () {
      if(this.isEditMode) {
        // 书籍选中状态取反
        this.data.selected = !this.data.selected
        // 当选择时调整选择书籍数量
        if(this.data.selected) {
          this.shelfSelected.pushWithoutDuplicate(this.data)
        } else {
          this.setShelfSelected(this.shelfSelected.filter(item => item.id !== this.data.id))
        }
      } else {
         if(this.data.type === 1){
          this.showBookDetail(this.data)
        } else if (this.data.type === 2) {
          // 跳转到分类页面
          this.$router.push({
            path: '/book/category',
            query: {
              title: this.data.title
            }
          })
        } else {
          gotoStoreHome(this)
        }
      }

    }
  },
}
</script>
<style lang='scss' scoped>
@import '../../assets/styles/global';
.shelf-item {
  position: relative;
  width: 100%;
  height: 100%;
  &.shelf-item-shadow {
    box-shadow: px2rem(2) px2rem(2) px2rem(6) px2rem(2) rgba(200, 200, 200, .3);
  }
  .shelf-item-comp {
    opacity: 1;
    &.is-edit {
      opacity: .5;
    }
  }
  .icon-selected {
    position: absolute;
    bottom: px2rem(2);
    right: px2rem(2);
    font-size: px2rem(18);
    color: rgba(0, 0, 0, .4);
    &.is-selected {
      color: $color-blue;
    }
  }
}
</style>
